<template>
	<view class="zone">
		<Header title=" " color="#fff"></Header>
		<view class="main">
			<!-- 资产 -->
			<view class="property" @click="$p.navto('/pages/my/my_crystal')">
				<image class="rank" @click.stop="$p.navto('/pages/index/rank')" src="http://img.cpgm.cc/panda/static/forest/r11.png" mode="heightFix" />
				<view class="left">
					<view>
						<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="heightFix" />
						<u-count-to :start-val="0" color="#fff" :end-val="userinfo.crystal" :decimals="5"></u-count-to>
					</view>
					<text>我的水晶</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="box">
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<!-- 新人林场 -->
			<view class="list" v-if="stat == 1"> 
				<view class="item1">
					<image :src="userinfo.new_mine?'http://img.cpgm.cc/panda/static/forest/shul2.png':'http://img.cpgm.cc/panda/static/forest/shul.png'" mode="widthFix" />
					<view class="posa">
						<p>
							<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
							<text>挖出来的水晶永久累计，多日累计也可一次性领取</text>
						</p>
						<view class="button" v-if="userinfo.is_check != 1" @click="$p.navto('/pages/my/authentication')">去实名</view>
						<p> <text  v-if="userinfo.is_check != 1">新人完成实名后即可免费挖30天水晶</text> </p>
					</view>
					<view v-if="userinfo.new_mine" class="wak center">
						<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
					</view>
				</view>
				<view class="flexbtn">
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"  class="button btn1 " :class="[userinfo.new_mine?'grey':'']" @click="newMine()">
						<text>{{userinfo.new_mine?'已激活':'激活矿场'}}</text>
					</u-button>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button receivebtn " :class="[userinfo.is_new_mine?'grey':'']" @click="getMineReward()"> 
						<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
						<text>{{userinfo.is_new_mine?'已领取':'领取水晶'}}</text>
					</u-button>
				</view>
			</view>
			
			<!-- // 熊猫林场 -->
			<view class="list" v-if="stat == 2">
				<view class="myinfo">
					<view class="m_item">
						<text>{{userinfo.direct}}</text>
						<text>团队人数</text>
					</view>
					<view class="line"></view>
					<view class="m_item">
						<text>{{userinfo.cards?userinfo.cards:'0'}}</text>
						<text>我的潮玩熊猫</text>
					</view>
				</view>

				<!-- 初阶挖水晶 -->
				<view class="beginning mart16">
					<view class="left">
						<text>初阶挖水晶</text>
						<view class="day">
							<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
							<text>{{getbaoshinum(userinfo.cards)}}/天</text>
						</view>
					</view>
					<view class="intro" @click="$p.navto('/pages/forest/introduce')">初阶介绍</view>
				</view>

				<view class="item1 mart15">
					<image :src="userinfo.cards > 0?'http://img.cpgm.cc/panda/static/forest/shul2.png':'http://img.cpgm.cc/panda/static/forest/shul.png'" mode="widthFix" />
					<view class="posa">
						<p>
							<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
							<text>挖出来的水晶永久累计，多日累计也可一次性领取</text>
						</p>
						<view v-if="userinfo.cards > 0" class="wak">
								<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
								<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
								<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
								<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
								<image src="http://img.cpgm.cc/panda/static/forest/wak.gif" mode="widthFix" />
							</view>
						<view v-else class="button" @click="show = true">买熊猫潮卡挖水晶</view>
						<p></p>
					</view>
				</view>
				
				<u-button :plain="true" :hair-line="false" hover-class="none" @click="carddig" :throttle-time="1000" class="button receivebtn " :class="[userinfo.is_crystal?'grey':'']">
					<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
					<text>{{userinfo.is_crystal?'已领取':'领取水晶'}}</text>
				</u-button>
			</view>

			<!-- 水晶林场 -->
			<view class="list" v-if="stat == 3">
				<view class="flexwarp">
					<view class="item"  v-for="(item , index) in datalist" :key="index">
						<view class="i_top">
							<image src="http://img.cpgm.cc/panda/static/forest/bg2.png" mode="widthFix" />
							<view class="iposa">
								<view class="p_top">
									<p class="p_tit">{{item.name}}</p>
									<view>
										<image src="http://img.cpgm.cc/panda/static/forest/panda.png" mode="widthFix" />
										<text>需要{{item.card}}只</text>
									</view>
									<p class="more">30天最多可挖{{item.num}}水晶</p>
								</view>
								<view class="ibot">
									<p>
										<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
										<text>{{item.crystal}}水晶可开启</text>
									</p>
									<view class="button" @click="openkc(item)">开启林场</view>
								</view>
							</view>
						</view>
						<view class="re_box">
							<p>已开启林场({{item.count}}/{{item.morenum}})</p>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[item.is_rece?'grey':'']" @click="getTaskReward(item)"> {{item.is_rece?'已领取':`领取今日${item.reward}水晶`}}</u-button>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 林场每日奖励 -->
		<u-mask :show="showresult">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/top.png" mode="widthFix" />
					<h3>林场每日奖励</h3>
					<view class="wightbg">
						<p>恭喜您成功领取{{taskresultname}}奖励</p>
						<image src="http://img.cpgm.cc/panda/static/forest/sj.png" mode="widthFix" />
						<text>{{taskresultnum}}水晶</text>
					</view>
				</view>
				<view class="mask_btn button" @click="showresult = false">开心收下</view>
			</view>
		</u-mask>

		<!-- 林场每日奖励 -->
		<u-mask :show="resultshow">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/top2.png" mode="widthFix" />
					<h3>林场每日奖励</h3>
					<view class="wightbg">
						<p>恭喜您成功领取</p>
						<image src="http://img.cpgm.cc/panda/static/self/sj.png" mode="widthFix" />
						<text>{{resultnum}}水晶</text>
					</view>
				</view>
				<view class="mask_btn button" @click="resultshow = false">开心收下</view>
			</view>
		</u-mask>


		<!-- 确定开通弹窗 -->
		<u-mask :show="isopenshow">
			<view class="warp">
				<view class="surebox">
					<view class="m_tit">是否确认开通</view>
					<view class="m_con">确认使用{{openinfo.crystal}}水晶 <block v-if="openinfo.card">和{{openinfo.card}}张熊猫潮卡</block> 开启{{openinfo.name}}吗</view>
					<view class="m_btn">
						<view class="button cancel" @click="isopenshow = false">取消</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="getTask()" class="button confirm" >确认</u-button>
					</view>
				</view>
			</view>
		</u-mask>



		<!-- 购买潮卡 -->
		<u-mask :show ="show">
			<view class="playbox" :class="[show?'playboxac':'']">
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/mask/card.png" mode="widthFix" />
					<h3>熊猫潮卡</h3>
					<view class="numbox">
						<text>交换数量</text>
						<view class="flex1">
							<u-number-box v-model="value" :min="1" :max="max" @change="valChange()" ></u-number-box>
						</view>
					</view>

					<!-- <view class="have have2">预计每天可挖出 <image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />  0.833333颗水晶</view> -->

					<view class="button" @click="show3 = true">
						<text>立即兑换</text>
						<p>
							<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
							21银元/张
						</p>
					</view>
					<view class="have">
						拥有 <image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />  {{userinfo.silver}}颗银元
					</view>
				</view>
			</view>
		</u-mask>


		<!-- 确定购卡 -->
		<u-mask :show="show3">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/self/card2.png" mode="widthFix" />
					<view class="wightbg">
						<p>确定使用{{buynum}}银元交换{{value}}熊猫潮卡？</p>
						<view class="mask_btn button"  @click="buyCard()">确定</view>
					</view>
					<p class="cancel" @click="show3 = false">取消</p>
				</view>
			</view>
		</u-mask>

		<u-mask :show="getcard">
			<view class="warp">
				<view class="maskbox3">
					<image class="topimg2" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您成功获得</p>
						<image src="http://img.cpgm.cc/panda/static/self/card2.png" mode="widthFix" />
						<text>{{num}}张潮玩卡</text>
					</view>
				</view>
				<view class="mask_btn button" @click="getcard = false">开心收下</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '新人林场'
					},
					{
						id: 2,
						name: '熊猫林场'
					},
					{
						id: 3,
						name: '水晶林场'
					},
				],
				stat: 1,
				showresult:false,
				resultshow:false,
				userinfo: uni.getStorageSync('userinfo'),
				resultnum:'',
				baoshinum:[0,0.16,0.32,0.48,0.64,0.80,0.96,1.12,1.17,1.22,1.27],
				datalist:[
					{
						id:5,
						name:'微型水晶林场',
						num:12,
						use:10,
						more:1,
						morenum:1,
					},
					{
						id:1,
						name:'小型水晶林场',
						num:120,
						use:100,
						more:1,
						morenum:8,
					},
					{
						id:2,
						name:'中型水晶林场',
						num:1221,
						use:1000,
						more:10,
						morenum:4,
					},
					{
						id:3,
						name:'大型水晶林场',
						num:12510,
						use:10000,
						more:100,
						morenum:2,
					},
					{
						id:4,
						name:'超大型水晶林场',
						num:128000,
						use:100000,
						more:1000,
						morenum:1,
					},
				],
				openinfo:'',
				isopenshow:false,
				taskresultnum:'',//宝石任务结果数量
				taskresultname:'',//宝石任务结果名称
				show:false,
				max:100,
				value:1,
				show2:false,
				buynum:21,
				show3:false,
				getcard:false,
				num:'',
			};
		},
		onLoad() {
			this.getUserInfo();
			this.taskList();
		},
		methods: {
			// 切换
			tabchange(id) {
				this.stat = id
			},

			// 请求用户信息接口
			async getUserInfo() {
				this.statnum = Math.trunc(Number(this.userinfo.crystal))
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
					this.max = Math.trunc(Number(res.data.silver) / 21)
				})
			},

			valChange(e){
				this.buynum = this.value * 21
			},

			// 交换潮玩卡
			async buyCard(){
				let res = await this.$http.index.buyCard({
					num:this.value
				})
				if(res.code == 1) {
					this.getUserInfo();
					this.show = false
					this.show3 = false
					this.num = this.value
					this.getcard = true
				}else {
					this.$u.toast(res.msg)
				}
			},

			getbaoshinum(num){
				if(num < 10) {
					return this.baoshinum[num]
				}else if( num > 9 && num < 100) {
					let d = num - 10
					return  + Number(1.27 + (d * 0.05)).toFixed(2)

				}else if(num >= 100) {
					return 5.77
				}
			},


			// 激活矿场
			async newMine(){
				if(this.userinfo.new_mine) {
					this.$u.toast('已激活')
				}else {
					let res = await this.$http.index.newMine();
					this.$u.toast(res.msg);
					if(res.code == 1) {
						this.getUserInfo();
					}
				}
			},
			// 领取新人矿场奖励
			async getMineReward(){
				if(this.userinfo.is_new_mine) {
					this.$u.toast('今日已领取')
				}else {
					let res = await this.$http.index.getMineReward()
					if(res.code == 1) {
						this.getUserInfo();
						this.resultnum = res.crystal
						this.resultshow = true
					}else {
						this.$u.toast(res.msg)
					}
				}
			},


			// 挖宝石领取
			async carddig(){
				if(this.userinfo.is_crystal) {
					this.$u.toast('今日已领取')
				}else {
					let res = await this.$http.index.carddig()
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.getUserInfo();
						this.resultnum = res.crystal
						this.resultshow = true
					}
				}
			},

			// 获取任务列表，
			async taskList(){
				let res = await this.$http.index.taskList1();
				this.datalist = res.data.map((item , index)=> {
					return {
						...this.datalist[index],
						...item
					}
				})
			},

			
			// 开启矿场
			openkc(item){
				this.openinfo = item
				this.isopenshow = true
			},

			// 开启矿厂接口
			async getTask(){
				let res = await this.$http.index.getTask({
					type:this.openinfo.type
				})
				this.$u.toast(res.msg);
				if(res.code == 1) {
					this.taskList();
					this.isopenshow = false
					this.getUserInfo();
				}
			},



			// 领取矿场奖励
			async getTaskReward(item){
				let res = await this.$http.index.getTaskReward({
					type:item.type,
				})
				// console.log(item);
				if(res.code == 1) {
					this.getUserInfo();
					this.taskList();
					this.taskresultnum = res.crystal
					this.taskresultname = item.name
					this.showresult = true
				}else {
					this.$u.toast(res.msg);
				}
			},

		},
	}
</script>

<style lang="less">
.zone {
	background: url('http://img.cpgm.cc/panda/static/forest/fbg.jpg') no-repeat #00051A;
	background-size: 100% auto;
	background-position-y: top;
	min-height: 100vh;
}

.main {
	padding: 12vh 10px 10px;
}

.title {
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		height: 30px;
	}
}

.right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0 10px;
	margin: 20px 0;

	image {
		height: 45px;
		margin: 10px 0;
	}
}

.property {
	background: url('http://img.cpgm.cc/panda/static/forest/bgn.png');
	background-size: 100% 100%;
	padding: 20px 15px 40px;
	display: flex;
	align-items: center;
	margin-top: 6vh;

	h3 {
		color: #FFFFFF;
		font-size: 26px;
	}

	.rank {
		height: 56px;
		margin-right: 20px;
	}

	.left {
		display: flex;
		align-items: center;
		flex-direction: column;

		view {
			display: flex;
			align-items: center;
		}

		image {
			height: 25px;
			margin-right: 10px;
		}
		text {
			color: #FFFFFF;
			font-size: 14px;
		}
	}
}

.box {
	min-height: calc(94vh - 297px);
	background: #00051A;
	border-radius: 19px 19px 0px 0px;
	padding: 12px;
	margin-top: -10%;
}


// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 5px;
	overflow: hidden;
	margin: 10px auto;
	border-radius: 7px;
	justify-content: space-between;
	// backdrop-filter: blur(50px);

	view {
		width: 32%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		color: rgba(255, 255, 255, 0.5);
		font-size: 14px;
		font-weight: 600;
		background: RGBA(5, 21, 89, 0.51);
		box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.2);
		border-radius: 5px;
	}
}
.active {
	color: #D9BE8E !important;
	background: #051559 !important;
}

.list {
	margin-top: 10px;
}

.item1 {
	position: relative;
	background: #FFF2E9;
	padding: 6px;
	border-radius: 15px;
	line-height: 0;
	image {
		width: 100%;
	}

	.posa {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		height: 100%;
		padding: 20px 10px;
		justify-content: space-evenly;

		p{
			display: flex;
			align-items: center;
			color: #FFFFFF;
			font-size: 13px;

			image {
				width: 22px;
				margin-right: 4px;
			}
		}
		.button {
			min-width: 120px;
			height: 38px;
			background: url('http://img.cpgm.cc/panda/static/forest/xbtn.png');
			background-size: 100% 100%;
			border-radius: 4px;
			color: #432900;
			font-size: 14px;
			font-weight: 600;
			padding: 0 10px;
		}
	}
}

.receivebtn {
	width: 90%;
	height: 65px;
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-top: 20px;

	image {
		width: 20px;
		margin-right: 5px;
	}
	text {
		color: #B73800;
		font-size: 16px;
		font-weight: 600;
	}
}


// 熊猫林场
.myinfo {
	background: #F2F2F2;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.m_item {
		width: 45%;
		display: flex;
		flex-direction: column;
		align-items: center;

		text:nth-child(1) {
			color: #000;
			font-size: 18px;
			font-weight: 600;
		}
		text:nth-child(2) {
			color: #000;
			font-size: 13px;
		}
	}

	.line {
		width: 1px;
		height: 28px;
		background: #000000;
		border-radius: 6px;
		opacity: 0.2;
	}
}

.beginning {
	background: rgba(231, 246, 254, 0.31);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		display: flex;
		align-items: center;

		text:nth-child(1) {
			color: #FFFFFF;
			font-size: 15px;
			font-weight: 600;
			margin-right: 5px;
		}
		.day {
			background: #FEFFFE;
			border-radius: 4px;
			padding: 4px 10px;
			display: flex;
			align-items: center;
			image {
				width: 20px;
				margin-right: 4px;
			}
			text {
				color: #000;
				font-weight: 600;
			}
		}
	}

	.intro {
		color: #000;
		background: #FEFFFE;
		border-radius: 4px;
		padding: 4px 10px;
		font-weight: 600;
	}
}


// 水晶林场 

.flexwarp {
	width: 100%;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;

	.item {
		width: 48%;
		background: #E9FFFB;
		padding: 6px 6px 10px;
		margin-bottom: 10px;
		border-radius: 17px;

		.i_top {
			position: relative;
			width: 100%;

			image {
				width: 100%;
			}

			.iposa {
				position: absolute;
				padding: 10px;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.p_top {
				display: flex;
				flex-direction: column;

				.p_tit {
					color: #FFFFFF;
					font-size: 15px;
					font-weight: 600;
				}

				.more {
					color: #fff;
					font-size: 12px;
					margin-top: 12px;
				}

				view {
					width: fit-content;
					background: rgba(233,245,253,0.1);
					border-radius: 4px;
					border: 1px solid rgba(255, 255, 255, 0.5);
					padding: 2px 5px;
					display: flex;
					align-items: center;
					margin-top: 5px;

					image {
						width: 20px;
						margin-right: 4px;
					}
					text {
						color: #EAF6FD;
						font-size: 12px;
					}
				}
			}

			.ibot {
				display: flex;
				flex-direction: column;

				p {
					display: flex;
					align-items: center;

					image {
						width: 20px;
						margin-right: 4px;
					}
					text {
						color: #fff;
						font-size: 12px;
					}
				}

				.button {
					width: 90%;
					height: 34px;
					margin: 0 auto;
					background: url('http://img.cpgm.cc/panda/static/forest/xbtn.png');
					background-size: 100% 100%;
					border-radius: 4px;
					margin-top: 5px;
					color: #432900;
				}
			}

		}

		.re_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 5px;

			p {
				color: #C16032;
				font-size: 12px;
				opacity: 0.8;
			}
		}

		.button {
			width: 90%;
			height: 40px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			color: #B73800;
			font-weight: 600;
			margin-top: 5px;
		}
	}
}



// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 50%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 16px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 80% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #343434;
	font-weight: 600;
	font-size: 18px;
}


.wak {
	width: 100%;
	position: absolute;
	bottom: 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;

	image {
		width: 60px;
	}
}

.flexbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 48% !important;
		height: 58px;
		background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 30px;
		color: #B73800;
		font-weight: 600;
		font-size: 18px;
	}
}

.grey {
	filter: grayscale(1) !important;
}

.center {
	display: flex;
	align-items: center !important;
	justify-content: center !important;
}




// 确定开宝箱
.surebox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 18px;
	padding: 20px;
}

.m_tit {
	color: #000000;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

.m_con {
	color: #696969;
	font-weight: 600;
	text-align: center;
	margin: 30px 0;
	text {
		color: #000000;
	}
}

.m_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 45%;
		height: 50px;
		font-size: 18px;
		font-weight: 600;
	}

	.cancel {
		background: #EAEAEA;
		box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
		border-radius: 5px;
		border: 1px solid #000000;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
		margin: 0 !important;
	}

	.confirm {
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
	}
}






// 购买潮卡


// 交换弹窗

.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 50%;
			margin-top: -28%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
			margin-top: 20px;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 100%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: center;
			margin: 5px 0;

			text {
				color: #1D1E24;
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
			}

			input {
				text-align: center;
				flex: 0.9;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				color: #B73800;
				font-size: 18px;
				font-weight: 600;
			}
			p {
				display: flex;
				align-items: center;
				color: #B73800;
				font-size: 14px;
				font-weight: 600;
				margin-top: 4px;

				image {
					width: 20px;
					margin-right: 4px;
				}
			}
		}

	}
	.closed {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}
}

.playboxac {
	bottom:0 !important;
}



.numbox {
	width: 100%;
	background: #FFFFFF;
	border-radius: 6px;
	padding: 15px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		color: #1D1E24;
		font-size: 14px;
		font-weight: 600;
		margin-right: 20px;
	}

	.flex1 {
		flex: 1;
	}
	
}

.have {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	margin-top: 10px;
	color: #000000;

	image {
		width: 20px;
	}
}

.have2 {
	font-size: 14px;
}


/deep/ .u-numberbox {
	width: 100%;
}
/deep/ .u-number-input {
	flex: 1 !important;
	background: transparent !important;
 }

 /deep/ .u-icon-minus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
 }

  /deep/ .u-icon-plus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
 }

.posaword {
	position: absolute;
	top: 13%;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 16px;
	z-index: 10;
}




.cancel {
	color: rgba(0, 0, 0, 0.7);
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
}



// 弹窗

.maskbox3 {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg2 {
		width: 35% !important;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}



.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}




</style>
